<!--
* @author wn
* @date 2022/05/24 14:36:19
* @description: 商品详情信息  图片预览组件
!-->
<template>
	<div class="goods-image">
		<!-- 主图 -->
		<div class="middle" ref="target">
			<!-- 图片可见时触发 改变url无法触发 绑定 key
			v-lazy="images[currentIndex]" :key="currentIndex"
			-->
			<img :src="images[currentIndex]" alt="" />
			<!-- 遮罩盒子 -->
			<div class="layer" v-show="!isOutside" :style="layerPosition"></div>
		</div>
		<!-- 侧边小图 -->
		<ul class="small">
			<li
				v-for="(item, index) in images"
				:key="index"
				@mouseenter="currentIndex = index"
				:class="{ active: currentIndex === index }"
			>
				<img :src="item" alt="" />
			</li>
		</ul>
		<!-- 大图预览 `background-image: url(${images[currentIndex]});`-->
		<div
			v-show="!isOutside"
			class="large"
			:style="{
				backgroundImage: `url(${images[currentIndex]})`,
				...largePosition,
			}"
		></div>
	</div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
	name: 'GoodsImage',
	props: {
		images: {
			type: Array,
			default: () => [],
		},
	},
	setup() {
		// 当前索引
		const currentIndex = ref(0)
		/**
		 * 放大镜  400-800   坐标放大2倍 （1,1）->(2,2)
		 * 遮罩层 position 移动  大图  background-positionX Y  反方向 负值
		 *
		 * useMouseInElement--isOutside 表示目标元素外面/里面   外面 true
		 * elementX/elementY    鼠标在盒子内的坐标
		 * x,y 相对浏览器
		 */
		// 定义目标元素  中图
		const target = ref(null)
		// 定义响应式数据，更新数据的时候更新视图
		const layerPosition = reactive({ left: 0, top: 0 })
		const largePosition = reactive({
			backgroundPositionX: 0,
			backgroundPositionY: 0,
		})
		const { elementX, elementY, isOutside } = useMouseInElement(target)
		// 监听鼠标的两个坐标值
		watch([elementX, elementY], array => {
			// 鼠标 超过100 盒子开始移动  到了300 停止
			// 盒子的 移动范围是 0-200
			// -100  =>  将鼠标移动坐标转化为 盒子移动的坐标
			let x = array[0] - 100
			let y = array[1] - 100
			// 设置边界
			if (x < 0) x = 0
			if (y < 0) y = 0
			if (x > 200) x = 200
			if (y > 200) y = 200
			// 样式需要加 px 单位
			layerPosition.left = `${x}px`
			layerPosition.top = `${y}px`
			// 计算大图的移动距离
			largePosition.backgroundPositionX = `${-x * 2}px`
			largePosition.backgroundPositionY = `${-y * 2}px`
		})
		return { currentIndex, target, isOutside, layerPosition, largePosition }
	},
}
</script>
<style scoped lang="less">
.goods-image {
	display: flex;
	position: relative;
	width: 480px;
	height: 400px;
	// 与城市 冲突
	z-index: 401;
	.middle {
		position: relative;
		width: 400px;
		height: 400px;
		background: #f5f5f5;
		cursor: move;
		.layer {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			background: rgba(0, 0, 0, 0.2);
		}
	}
	.small {
		width: 80px;
		li {
			width: 68px;
			height: 68px;
			margin-left: 12px;
			margin-bottom: 15px;
			cursor: pointer;
			// &:hover,
			&.active {
				border: 2px solid @xtxColor;
			}
		}
	}
	// 大图预览
	.large {
		position: absolute;
		top: 0;
		left: 412px;
		overflow: hidden;
		width: 400px;
		height: 400px;
		background-color: #f8f8f8;
		background-repeat: no-repeat;
		background-size: 800px 800px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
}
</style>
